<template>
    <div class="uploadParent">
        <div class="upload">
            <div v-if="imgUrl" class="imgP">
                <video class="img" :src="imgUrl" controls></video>
                <span class="iconfont close icon-closefill" @click.stop="closeVideo"></span>
            </div>
            <el-upload v-else class="upload-demo" accept="video/*" drag :action="getbaseUrl" :on-success="handleAvatarSuccess">
                <div class="padd">
                    <div>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽到此也可上传 <em>或点击上传</em>
                        </div>
                    </div>
                </div>
            </el-upload>

           
        </div>
    </div>
</template>

<script setup name="videoUpload">
import { UploadFilled } from '@element-plus/icons-vue'
import { baseUrl } from "@/utils/util"
import { ref } from "vue"

// 图片上传请求api
let getbaseUrl = baseUrl() + "/upload/album"
// 图片api地址
let apiImg = baseUrl()

let imgUrl = ref("")

let emit = defineEmits(["getVideoName","removeVideoName"])

let handleAvatarSuccess = (response, uploadFile) => {
    // console.log(response, uploadFile)
    imgUrl.value = apiImg + "/images/" + response.data
    emit("getVideoName",response.data)
}

// 关闭视频
const closeVideo = ()=>{
    imgUrl.value = ""
    emit("removeVideoName")
}



defineExpose({
    closeVideo
})


</script>

<style lang="scss" scoped>
.uploadParent {

    .upload {
        display: flex;
        align-items: center;
        justify-content: center;

        .padd {
            width: 600px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .imgP {
            width: 600px;
            height: 300px;
            position: relative;
            .img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .close{
                position: absolute;
                top: -7px;
                right: -5px;
                z-index: 10;
                color: #fff;
                font-size: 30px;
                cursor: pointer;
            }

        }
    }
}
</style>